
/**
 * 控制元素是否进入可视区域
   * 结论：
   * 1. 通过回调函数的 isIntersecting 判断组件或元素是否进入可视区
   * 2. 监控是一直在执行 （第一次进入的时候，发请求（只发一次））
   */

/**
 * 全局共用钩子方法
 */
import { ref, onUnmounted } from 'vue'
// 导入监控元素是否进入可视区函数
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

/**
 * @param {*} apiFn  请求方法
 */
export const useObserver = (apiFn) => {
  const target = ref(null)

  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // isIntersecting 判断组件或元素是否进入可视区域 =》 true 进入 | false 离开
      // console.log(isIntersecting)
      if (isIntersecting) {
        // console.log('进入可视区域，发一次请求，达到目的，就关闭监控')
        // 进去人气推荐可视区域开始发请求，离开就关闭请求
        apiFn()
        // 关闭监控
        stop()
      }
    },
    {
      // 楼层商品列表露头之后立马执行不让留空白
      threshold: 0
    }
  )

  return { target }
}

export function useCountDown (time) {
  /**
   * pause 停止
   * resume 开始
   */
  const count = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    count.value--
    if (count.value === 0) {
      pause()
    }
  }, 1000, { immediate: false })

  const start = () => {
    // 每次开始判断如果是0，重新开始
    if (count.value === 0) {
      count.value = time
    }
    // 开始倒计时
    resume()
  }

  // 组件销毁时，清除定时器
  onUnmounted(() => {
    pause()
  })

  // 暴露=》数据和方法
  return { count, start, pause }
}
